/**
 * 第 3 讲
 */
import React from 'react'

import LittleGirl from '../assets/img/little_girl.jpg'

export default class News2 extends React.Component {
  constructor() {
    super()

    this.state = {
      mgs: '新闻',
      list: [1,2,3,4],
      list2: [<h2 key='1'>我是一个h2</h2>, <h2 key='2'>我是第二个h2</h2>],
      list3: [
        {title: '新闻11'},
        {title: '新闻22'},
        {title: '新闻33'},
      ],
    }
  }

  // jsx模版
  render() {
    const listResult = this.state.list.map(function(value, key) {
      return <li key={'i_' + key}>{key + '-' + value}</li>
    })
    return (
      <div className='content'>
        {this.state.mgs}
        <br />

        <h2>引入本地图片</h2>
        <img className="img" src={LittleGirl} alt=''/>
        <img className="img" src={require('../assets/img/little_girl.jpg')}  alt='' />

        <h2>引入远程图片</h2>
        <img className="img" src='http://img08.tooopen.com/20190825/tooopen_sl_142538253869122.jpg'  alt='' />

        <br />
        {this.state.list2}
        <ul>
          {listResult}
        </ul>

        <br />
        {
          // js 代码
          this.state.list3.map((value, key) => {
            return <li key={'3_' + key}>{value.title}</li>
          })
        }
      </div>
    )
  }
}